<!DOCTYPE html>
<html>
<head>
    <title>Map</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.2/dist/leaflet.css" />
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis-timeline-graph2d.min.css" />
    <script src="https://unpkg.com/leaflet@1.0.2/dist/leaflet.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.18.1/vis.min.js"></script>
</head>
<body>

<div id="mapid" style="width: 1200px; height: 800px;"></div>
<div id="timeline" style="width: 1200px; height: 200px;"></div>
<script>
    function formatDate(date) {
      return date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
    };
    function formatDateRange(start, end) {
        return formatDate(start) + "/" + formatDate(end);
    };

    var start = new Date(2006, 1, 1);
    var end = new Date(2006, 3, 1);

    var mymap = L.map('mapid').setView([-35.0, 148.75], 12);
    mbUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
    osm = L.tileLayer(mbUrl, {id: 'mapbox.light', attribution: ""});
    cube = L.tileLayer.wms(
        "{{ url_for('wms_impl') }}",
        {
            minZoom: 6,
            maxZoom: 19,
            layers: "ls5_sr_rgb",
            format: 'image/png',
            transparent: true,
            attribution: "Teh Cube",
            time: formatDateRange(start, end)
        }
    );
    cube_cir = L.tileLayer.wms(
        "{{ url_for('wms_impl') }}",
        {
            minZoom: 6,
            maxZoom: 19,
            layers: "ls8_sr_cir",
            format: 'image/png',
            transparent: true,
            attribution: "Teh Cube",
            time: formatDateRange(start, end)
        }
    );
    cube_false = L.tileLayer.wms(
        "{{ url_for('wms_impl') }}",
        {
            minZoom: 6,
            maxZoom: 19,
            layers: "ls8_sr_false",
            format: 'image/png',
            transparent: true,
            attribution: "Teh Cube",
            time: formatDateRange(start, end)
        }
    );
    cube.addTo(mymap);
    L.control.layers({'OSM': osm, 'RGB': cube}, {}).addTo(mymap);

    items = new vis.DataSet([{id: 1, content: 'time', start: start, end: end}]);
    function onUpdate(event, properties, senderId) {
        start = properties.data[0].start;
        end = properties.data[0].end;
        cube.setParams({time: formatDateRange(start, end)});
    };
    items.on('update', onUpdate);

    options = {
        editable: {
            updateTime: true
        },
        start: new Date(2006, 1, 1),
        end: new Date()
    };
    var timeline = new vis.Timeline(document.getElementById('timeline'), items, options);
</script>
</body>
</html>
